<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>啊哈编程</title>
  <!-- 引入样式文件 -->
  <!-- 引入 Vue 和 Vant 的 JS 文件 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script>
    window.onload = function () {
      // 在 #app 标签下渲染一个按钮组件
      new Vue({
        el: '#app',
        data: function () {
          return {
            form: {
              classroom: '',
              club: '',
              name: '',
              grade: [],
              school: '',
              phone: '',
              time: ''
            },
            ruleForm: {
              classroom: [
                {required: true, message: '请选择班级', trigger: ['blur', 'change']}
              ],
              name: [
                {required: true, message: '请输入姓名', trigger: ['blur', 'change']}
              ],
              club: [
                {required: true, message: '请选择社团', trigger: ['blur', 'change']}
              ],
              grade: [
                {required: true, message: '请选择年级', trigger: ['blur', 'change']}
              ],
              school: [
                {required: true, message: '请输入学校', trigger: ['blur', 'change']}
              ],
              phone: [
                {required: true, message: '请输入电话号码', trigger: ['blur', 'change']}
              ],
              time: [
                {required: true, message: '请选择时间段', trigger: ['blur', 'change']}
              ],
            }
          }
        },
        mounted: function () {
        },
        methods: {
          submit: function () {
            var that = this
            this.$refs.form.validate(function (valid) {
              if (valid) {
                $.post('/url', that.form, function (res) {
                  console.log(res)
                  this.$message.success('提交成功')
                })
              }
            })
          }
        }
        // template: `<van-button>按钮</van-button>`,
      })

      // 调用函数组件，弹出一个 Toast
      // vant.Toast('提示');
      // 通过 CDN 引入时不会自动注册 Lazyload 组件
      // 可以通过下面的方式手动注册
    }
  </script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .fc {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .aha {
      position: relative;
      background-color: #076aba;
      min-height: 130vh;
      width: 100vw;
    }

    .logo {
      position: absolute;
      width: 100px;
      left: 2vw;
      top: 2vw;
      z-index: 50;
    }

    .header {
      width: 100%;
    }

    .recruit-students {
      position: absolute;
      left: 2vw;
      top: 40vw;
      width: 150px;
      height: 40px;
      color: #076aba;
      font-size: 17px;
      font-weight: bold;
      text-align: center;
      line-height: 40px;
      letter-spacing: 2px;
      background-color: #FFF;
      box-shadow: 0px 2px rgba(0, 0, 0, 0.1);
      border-radius: 100px;
      z-index: 60;
    }

    .robot {
      position: absolute;
      width: 80px;
      top: 50vh;
      right: 0;
      z-index: 40;
    }

    .form {
      position: absolute;
      left: 50%;
      top: 70vw;
      z-index: 30px;
      transform: translateX(-50%);
      width: 80%;
      height: 500px;
      background-color: #FFF;
      border-radius: 16px 16px;
      display: grid;
      grid-template-rows: repeat(6, 1fr);
      padding: 20px;
    }
  </style>
</head>

<body>
<div id="app">
  <div class="aha">
    <img src="https://aha-edu.oss-cn-huhehaote.aliyuncs.com/aha_poster/LOGO.png" class="logo"/>
    <img src="https://aha-edu.oss-cn-huhehaote.aliyuncs.com/aha_poster/999AC160-F354-4cc6-99CA-8CD5C1B2C474.png"
         alt="" class="header"/>
    <div class="recruit-students">火热招生进行中</div>
    <el-form ref="form" class="form" :model="form" :rules="ruleForm" label-width="70px">
      <el-form-item label="社团" prop="club">
        <el-select v-model="form.club" placeholder="请选择社团"></el-select>
      </el-form-item>
      <el-form-item label="学校" prop="school">
        <el-input style="width:221px" v-model="form.school" placeholder="请输入学校"></el-input>
      </el-form-item>
      <el-form-item label="班级" prop="classroom">
        <el-select v-model="form.classroom" placeholder="请选择班级"></el-select>
      </el-form-item>
      <el-form-item label="时间段" prop="time">
        <el-select v-model="form.time" placeholder="请选择时间段"></el-select>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input style="width:221px" v-model="form.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="年级" prop="grade">
        <el-select v-model="form.grade" placeholder="请选择年级"></el-select>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input type="number" style="width: 221px" v-model="form.phone" placeholder="请选择电话"></el-input>
      </el-form-item>
      <el-form-item>
        <div class="fc">
          <el-button type="primary" @click="submit">提交</el-button>
        </div>
      </el-form-item>
    </el-form>
    <img src="https://aha-edu.oss-cn-huhehaote.aliyuncs.com/aha_poster/robot.png" class="robot"/>
  </div>
</div>
</body>
</html>
